<div id="mainContent" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="overflow: hidden;height: 165px;">
        <div class="easyui-panel" data-options="footer:'#panel-footer',border:0">
        <fieldset style="padding: 10px;margin: 4px; border:1px solid #f0ad4e">
            <legend>新增/更新</legend>
            <form id="sysDictForm" name="sysDictForm" method="POST" action="${base}/admin/sysdict/addNew.do">
                <input type="hidden" id="dictLevel" name="dictLevel" value="2"/>
                <div style="margin-bottom:20px;text-align: right">
                    <input id="parentDictId" name="parentDictId" class="easyui-combobox theme-textbox-radius" label="字典根:" data-options="
                    url:'${base}/admin/sysdict/findParentDict.do',
                    required:true,
                    editable:false,
                    valueField:'dictId',
                    textField:'dictName',
                    onLoadSuccess: function(){
                        $(this).combobox('select','1');
                    },
                    onChange: function(newVal,oldVal) {
                        if (newVal != 1) {
                            $('#dictLevel').val('3');
                        } else {
                            $('#dictLevel').val('2');
                        }
                    }
                    " style="width:33%;"/>
                    <input id="dictName" name="dictName" class="easyui-textbox theme-textbox-radius" label="名称:" data-options="prompt:'请输入字典的名称',required:true" style="width:33%;"/>
                    <input id="dictValue" name="dictValue" class="easyui-textbox theme-textbox-radius" label=" 值域:" data-options="prompt:'请输入字典的值',required:true" style="width:33%;"/>
                </div>
                <div style="text-align: right">
                    <input id="orderNo" name="orderNo"  class="easyui-numberspinner theme-textbox-radius" label="序号:" value="1" style="width:20%;"/>
                    <input id="remarks" name="remarks"  class="easyui-textbox theme-textbox-radius" label="备注:" style="width:79%;"/>
                </div>
            </form>
        </fieldset>
        </div>
        <div id="panel-footer" style="padding: 2px 10px;text-align: right">
            <a id="submitBtn" href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:80px;height:26px;">提交</a>
        </div>
    </div>
    <div data-options="region:'center'">
        <table id="sysDictDg" title="列表" class="easyui-treegrid"
               data-options="
                iconCls: 'icon-dict',
                url: '${base}/admin/sysdict/dataList.do',
                fit:true,
                lines: true,
                rownumbers: true,
                striped: true,
                animate:true,
                singleSelect : true,
                collapsible: true,
                fitColumns: true,
                idField: 'dictId',
                treeField: 'dictName',
                onLoadSuccess: loadSuccess,
                toolbar:toolbar
            " border="0">
            <thead data-options="frozen:true">
            <tr>
                <th data-options="field:'parentDictId',hidden:true">父键</th>
                <th data-options="field:'dictName',editor:'text'" width="15%">名称</th>
                <th data-options="field:'dictValue'" width="15%">值域</th>
                <th data-options="field:'orderNo',editor:'numberbox'" width="5%">序号</th>
                <th data-options="field:'remarks',editor:'text'" width="30%">备注</th>
                <th data-options="field:'dictId',formatter: formatterControl" width="23%">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<script>

    var expand = true;
    
    var toolbar = [{
            text:'刷新',
            iconCls:'icon-refresh',
            handler:function(){
                $('#sysDictDg').treegrid('reload');
            }
        },'-',{
            text:'折叠/展开',
            iconCls:'icon-collapse',
            handler:function(){
                if (expand) {
                    $('#sysDictDg').treegrid('collapseAll');
                    expand = false;
                } else {
                    $('#sysDictDg').treegrid('expandAll');
                    expand = true;
                }
            }
        }];

    var exist = true;

    $(function(){

        $('#submitBtn').bind('click', function () {
            checkDict($('#dictValue').val());
            if (exist) {
                return ;
            } else {
                submitFrm('sysDictForm', '新增字典信息');
                if ($('#dictLevel').val() != 3) {
                    $('#sysDictDg').treegrid('reload');
                } else {
                    var parentId = $('#parentDictId').combobox('getValue');
                    $('#sysDictDg').treegrid('reload', parentId);
                }

                $('#sysDictForm').form('reset');
                $('#parentDictId').combobox('select','1');
                $('#dictLevel').val('2');
                $('#orderNo').val('1');
            }
        });

    });

    function formatterControl(val,row) {
        var edit = '<a class="editBtn" href="#" value="'+val+'">修改</a>';
        var save = '<a class="saveBtn" href="#" value="'+val+'">保存</a>';

        return edit + '&nbsp;&nbsp;&nbsp;&nbsp;' + save;
    }

    function loadSuccess(data) {

        var dc;
        if (data == null) {
            dc = $('#mainContent').find('.editBtn, .saveBtn');
        } else {
            dc = $('#mainContent').find('.treegrid-tr-tree').find('.editBtn, .saveBtn');
        }

        renderLinkBtns(dc);

        $(this).treegrid('expandAll');
    }

    function checkDict(dictVal) {
        $.ajax({
            type: 'post',
            url:'${base}/admin/sysdict/checkDict.do',
            data:{'dictVal': dictVal},
            async : false,
            success:function (data) {
                if(data.ok) {
                    showMsg('操作失败', data.msg);
                    exist = true;
                    return ;
                }
                exist = false;
            }
        });
    }

    var dictDg = $('#sysDictDg');
    function editDict(editingId){

        if (editingId != undefined){
            dictDg.treegrid('select', editingId);
            dictDg.treegrid('beginEdit', editingId);
            return;
        }
        var row = dictDg.treegrid('getSelected');
        if (row){
            editingId = row.id
            dictDg.treegrid('beginEdit', editingId);
        }
    }

    function saveDict(editingId){
        if (editingId != undefined){
            dictDg.treegrid('endEdit', editingId);
            var data = dictDg.treegrid('getSelected');
            $.post('${base}/admin/sysdict/update.do',data, function (data) {
                if (data.ok) {
                    dictDg.treegrid('reload', editingId);
                    var dc = $('#mainContent').find('.editBtn, .saveBtn');
                    renderLinkBtns(dc)
                } else {
                    showMsg('操作失败', data.msg+'<br/>错误代码:'+data.errCode);
                }
            });
        }
    }
    
    function renderLinkBtns(dc) {
        if (dc.length < 1) {
            return ;
        }

        $(dc).each(function(r, d){
            var cls = $(this).attr('class');
            $(this).attr('id', 'controlBtn_'+this.value+'_'+r);
            if (cls == 'editBtn') {
                $(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-edit',
                    onClick: function () {
                        editDict($(this).attr('value'));
                        $(this).linkbutton('disable');
                        $(this).next().linkbutton('enable');
                    }
                });
            } else if (cls == 'saveBtn') {
                $(this).linkbutton({
                    plain: true,
                    iconCls: 'icon-save',
                    disabled: true,
                    onClick: function () {
                        saveDict($(this).attr('value'));
                        //TODO why there need use id property, can't understand!!!
                        var prev = $(this).prev();
                        $($(prev).attr('id')).linkbutton('enable');
                        $($(this).attr('id')).linkbutton('disable');
                    }
                });
            }
        });
    }

</script>
